<template>
  <div class="knowledge-list">
    <h4 class="title">知识点列表</h4>
    <ul>
      <li v-for="v in tableData" :key="v.id" @click="handleClick(v)">
        <p :class="['sheng', { active: active == v.id }]" :title="v.name">
          {{ v.name }}
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
import { sysKnowledgeQuery } from '@/api/admin/courseLibrary/sysKnowledge.js'
import Bus from '@/utils/bus.js'
export default {
  data() {
    return {
      active: '',
      type: this.$route.meta.type,
      listQuery: {
        page: 1,
        limit: 10,
        courseId: this.$store.getters.courseId,
      },
      tableData: [],
      pageObj: {},
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      sysKnowledgeQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.pageObj = res.data
        if (!this.tableData.length) return
        if (this.tableData.length > 0) {
          this.active = this.tableData[0].id
        }
        Bus.$emit('sendKnowledgeId', { resId: this.tableData[0].id })
      })
    },
    handleClick(v) {
      this.active = v.id
      Bus.$emit('sendKnowledgeId', { resId: v.id })
    },
  },
}
</script>
<style scoped lang="scss">
.knowledge-list {
  height: 800px;
  .title {
    padding: 5px 0;
    line-height: 32px;
    border-bottom: 1px solid #eee;
  }
  ul {
    padding: 10px 0;
    li {
      padding: 6px;
      border-bottom: 1px dashed #eee;
      p {
        line-height: 26px;
        max-width: 240px;
        cursor: pointer;
        color: #333;
        &.active,
        &:hover {
          color: var(--colorH1);
        }
      }
    }
  }
}
</style>